<template>
  <div class="using">
    <h2>如何使用实力接单</h2>
    <div class="tabs-container">
      <el-tabs tabPosition="left" class="custom-tabs">
        <el-tab-pane label="创建项目">
          <div class="tab-content">
            <div class="tab-image">
              <img
                src="https://power-orders.oss-cn-shenzhen.aliyuncs.com/89dd3368-d854-4121-98dc-7acb5d645ce0.png"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="创建模块">
          <div class="tab-content">
            <div class="tab-image">
              <img
                src="https://power-orders.oss-cn-shenzhen.aliyuncs.com/53aad249-2af1-446c-9585-2de0c6035cf0.png"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="创建活动">
          <div class="tab-content">
            <div class="tab-image">
              <img
                src="https://power-orders.oss-cn-shenzhen.aliyuncs.com/966e393c-93c4-4c48-90e6-44219ed406e8.png"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="创建任务">
          <div class="tab-content">
            <div class="tab-image">
              <img
                src="https://power-orders.oss-cn-shenzhen.aliyuncs.com/7699ad27-27be-49ec-a1a5-31b918a8916f.png"
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="less" scoped>
.using {
  padding: 90px 0;
  background-color: #ffffff;
  text-align: center;
  h2 {
    font-size: 36px;
    color: #000000;
    margin-bottom: 30px;
  }
  .custom-tabs {
    width: 1200px;
    margin: 0 auto;
    align-items: center;
  }
  .tab-content {
    display: flex;
    justify-content: center;
  }
  .tab-image img {
    width: 800px;
    border-radius: 10px;
    border: #828c99 solid 1px;
  }
}
</style>
